/**
 * 销售订单
 * 
 */

import { List, Badge, Button } from 'antd-mobile';
import React from 'react';
import style from './style.module.scss';
import CommodityListItem from 'components/CommodityListItem'
import Panel from 'components/Panel';
import lazy from 'router/utils/lazy';
import { Route, RouteChildrenProps, Switch, withRouter } from 'react-router-dom';
import history from 'router/history'
import { decorator } from 'grey-react-box';

const OrderEdit = lazy(() => import('page/OrderEdit'));

const mok = [1, 2, 3, 4, 5, 6, 7, 8, 9]

export default decorator<any, RouteChildrenProps>(
    withRouter
)(props => {

    const { pathname } = props.location

    const onClickSingle = React.useCallback(() => {
        history.push(`${pathname}/edit`)
    }, [pathname])

    return (
        <>
            <Panel className={style.body} >
                <div className={style.list} >
                    <List renderHeader={() => '销售订单'} className="my-list">
                        {mok.map(() => {
                            return (
                                <div className={style.item} >
                                    <CommodityListItem
                                        img={require('./imgs/timg.jpg')}
                                        price={999}
                                        num={8}
                                        title="商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题"
                                    />
                                    <List.Item extra={<Button size="small" type="primary" inline onClick={onClickSingle} >编辑</Button>} >
                                        <Badge text="未发货" className={style.badge}
                                            style={{ color: ' #f19736', border: '1px solid #f19736', backgroundColor: '#fff', borderRadius: 2, }}
                                        />
                                        <Badge text="运单号:GT09382448249" className={style.badge}
                                            style={{ color: ' #f19736', border: '1px solid #f19736', backgroundColor: '#fff', borderRadius: 2, }}
                                        />
                                    </List.Item>
                                </div>
                            )
                        })}
                    </List>
                </div>
            </Panel >
            <Switch>
                <Route path="*/edit" component={OrderEdit} />
            </Switch>
        </>
    )
})